import { defineComponent, onActivated, onMounted, reactive, ref } from "vue";
import styles from "./orderSearchList.module.scss";
import { useRouter } from "vue-router";
import { useStore as useIndexStore } from "@/store/index";
import to from "await-to-js";
import { $getList } from "@/api/api";
import { useStore as useUserStore } from "@/store/user";

export default defineComponent({
  setup() {
    const router = useRouter();
    const indexStore = useIndexStore();
    const userStore = useUserStore();
    const order = reactive({
      first_loading: false,
      list: [],
    });
    // dom scroll 节点
    const scroll = ref(null as any);
    // 滚动条上拉距离
    const scrollTop = ref(0);
    // 激活页面时设置滚动条置为记录的上拉距离
    onActivated(() => {
      scroll.value.scrollTop = scrollTop.value;
    });

    const getList = async () => {
      const [err, res]: any = await to($getList({
        token: userStore.login_info.token
      }));
      if (!err) {
        order.list = order.list.concat(res.data);
      }
      order.first_loading = false;
    }
    onMounted(() => {
      order.first_loading = true;
      getList();
    })

    const toDetail = (item: any) => {
      router.push({
        path: '/orderSearchDetail',
        query: {
          id: item.id
        }
      });
    }
    return () => (
      <>
        <div class={styles.orderSearchList}>
          <div class={styles.container} ref={scroll}>
            {
              order.first_loading ? <div class={styles.loading}>
                加载中...
              </div> :
                <div >
                  <div class={styles['order-list']}>
                    {
                      order.list.length > 0 ?
                        order.list.map((item: any, index: number) => (
                          <div class={styles['order-item']}>
                            <div class={styles['item-header']}>
                              <span class={styles['name']}>{indexStore.info.name}</span>
                            </div>
                            <div class={styles['item-container']}>
                              <div class={styles['item-row']}>
                                <span class={styles['row-label']}>订单号：</span>
                                <span class={styles['row-value']}>{item.order_no}</span>
                              </div>
                              <div class={styles['item-row']}>
                                <span class={styles['row-label']}>投保人：</span>
                                <span class={styles['row-value']}>{item.applicant_name}</span>
                              </div>
                              <div class={styles['item-row']}>
                                <span class={styles['row-label']}>参保人：</span>
                                <span class={styles['row-value']}>{item.insured_name}</span>
                              </div>
                              <div class={styles['item-row']}>
                                <span class={styles['row-label']}>订单时间：</span>
                                <span class={styles['row-value']}>{item.create_time}</span>
                              </div>
                            </div>
                            <div class={styles['item-footer']}>
                              <div class={styles['label']}>
                                <span>订单金额:</span>
                                <span class={styles.premium}>128.00</span>
                                <span>元</span>
                              </div>
                              <div class={styles['btns']}>
                                <div class={styles['btn']} onClick={() => { toDetail(item) }}>查看详情</div>
                              </div>
                            </div>
                          </div>
                        )) : <div class={styles['no-record']}>
                          暂无投保信息
                        </div>
                    }
                  </div>
                </div>
            }
          </div>
        </div>
      </>
    )
  }
})